<template>
    <!-- 用户注册信息 -->
  
      <van-overlay :show="regShow" class="myregbox">
        <div class="wrapper" @click.stop>
          <div class="block">
            <div class="flexb">
              <div class="title">填写签到信息</div>
              <div>
                <van-icon name="cross" size="20" @click="close" />
              </div>
            </div>
            <div class="form-style">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item>
                  <el-select v-model="form.depart_code" placeholder="请选择学校">
                    <el-option
                      v-for="(item, index) in schoolList"
                      :key="index"
                      :label="item.name"
                      :value="item.depart_code"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <div class="container">
                    <el-date-picker
                      v-model="form.grade"
                      type="year"
                      placeholder="选择入学学年"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="form.gender" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="flexc">
                  <el-button
                    type="primary"
                    @click="onSubmit"
                    style="background-color: #f57373; border: none"
                    >确定提交</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </van-overlay>

</template>

<script>
export default {
  data() {
    return {
      openid: $.cookie("openid"),
      infoShow: true,
      schoolList: [],
      form: {
        depart_code: "", //请选择学校
        grade: "", //请选择入学年份
        gender: "", //性别
      },
    };
  },
  computed: {},
  methods: {
    close(){
      this.changeRegShow(false)
    },
    /*高校列表*/
    async getSchoolList() {
      let res = await this.$ajax.getSchoollist();
      if (res.code == 1) {
        this.schoolList = res.data;
      }
    },
    /*确定提交*/
    async onSubmit() {
      if (this.form.depart_code && this.form.grade && this.form.gender) {
        var date = new Date(this.form.grade);
        this.form.grade = date.getFullYear(date);
        console.log(this.form.grade, "111");
        let res = await this.$ajax.Register({
          depart_code: this.form.depart_code,
          grade: this.form.grade,
          gender: this.form.gender,
          openid: this.openid,
        });
        if (res.code == 1) {
          this.$toast(res.msg);
        } else {
          this.$toast(res.msg);
        }

        console.log(this.form, "注册数据");
      } else {
        this.$toast("请输入完整的信息");
      }
    },
  },
  mounted() { 
    this.getSchoolList(); //高校列表
  },
};
</script>

<style lang="scss" scoped>
.display-justbet {
  display: flex;
  justify-content: space-between;
}

.flexc {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  // 弹框样式
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .block {
      width: 312px;
      height: 280px;
      background-color: #fff;
      border-radius: 10px;
      padding: 10px;
      .title {
        font-size: 20px;
      }

      .toast-style {
        font-size: 24px;
        margin: 20px 10px;
      }
      .btn-style {
        margin-top: 50px;
      }
    }
  }
  .form-style {
    margin-top: 20px;
    ::v-deep .el-form-item__content {
      margin-left: 0px !important;
      .el-select {
        width: 95%;
      }
    }
  }
  .el-date-editor.el-input{
    width: 95%;
  }
</style>